<template>
    <div >
        <el-table class="content-list" border :data="data" style="width: 100%">
            <el-table-column prop="index" label="序号" width="80"/>
            <el-table-column label="轮播图片">
                <template #default="scope">
                    <el-image
                        style="width: 50px; height: 50px"
                        :hide-on-click-modal="true"
                            :preview-teleported="true"
                            :preview-src-list="[scope.row.content && scope.row.content.images && scope.row.content.images.length > 0
                                ? prefixUrl + scope.row.content.images[0].path
                                : '']"
                            :src="
                            scope.row.content && scope.row.content.images && scope.row.content.images.length > 0
                                ? prefixUrl + scope.row.content.images[0].path
                                : ''
                        "
                        fit="contain"
                    />
                </template>
            </el-table-column>
            <el-table-column prop="content.title" label="标题" width="150"/>
            <el-table-column label="内容" >
                <template #default="scope">
                    <el-text truncated>{{ scope.row.content.text }}</el-text>
                </template>
            </el-table-column>
            <el-table-column label="类别" width="100">
                <template #default="scope">
                    <el-text>{{ scope.row.content.type.name }}</el-text>
                </template>
            </el-table-column>
            <el-table-column label="状态" width="100" >
                <template #default="scope">
                    <el-tag
                    v-if="scope.row.content && scope.row.content.status.id == 1003"
                    type="info"
                    disable-transitions>已下线</el-tag>
                    <el-tag
                    v-else
                    type="success"
                    disable-transitions>正常</el-tag>
                </template>
            </el-table-column>
            
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button
                        size="small"
                        :disabled="scope.row.index == 1"
                        @click="handleMove(scope.row.id,-1)"
                        >上移</el-button
                    >
                    <el-button
                        size="small"
                        :disabled="scope.row.index == pagination.total"
                        @click="handleMove(scope.row.id,1)"
                        >下移</el-button
                    >
                    <el-button
                        size="small"
                        type="danger"
                        @click="handleDelete(scope.row.id)"
                        >删除</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script setup>
import { ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { storeToRefs } from "pinia";
import { defineProps, defineEmits } from "vue";
import { url,staticUrl } from "@/services";
import { moveElement } from "@/utils/util";
import { deleteCarousel } from "@/services/carousel";
import { updateCarouselIndex } from "../../../services/carousel";
const prefixUrl = ref(staticUrl);

const props = defineProps(["data","pagination"]);
const emit = defineEmits(["show"]);

async function handleMove(id,val) {
    await updateCarouselIndex(id,val);
    console.log("props.pagination.pagNum",props.pagination.pageNum);
    emit("show",props.pagination.pageNum);
}
async function handleDelete(id) {
    ElMessageBox.confirm("是否确认删除?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    }).then(async () => {
        await deleteCarousel(id);
        emit("show");
    });
}
</script>
<style>
.content {
    /* padding-bottom: 50px; */
}
.content-list {
    /* margin-top: 25px; */
    /* margin-bottom: 15px; */
    /* height:380px; */
}
</style>
